
<template>
  <div class="dashboard-container">
    <el-drawer ref="drawer" size="600px" :title="status==1?'新增':'编辑'" :visible.sync="showDialog" :wrapper-closable="true" @close="close">
      <div class="detial">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="真实提单号:" prop="code">
                <el-input v-model="ruleForm.code" placeholder="请输入真实提单号" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="航班号:" prop="flight_id">
                <el-select
                  v-model="ruleForm.flight_id"
                  style="width:100%"
                  placeholder="请选择航班号"
                  @change="chengFlight"
                >
                  <el-option
                    v-for="(item,index) in flightList"
                    :key="index"
                    :label="item.flight_number"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="校验收件人:" prop="check_common_receiver">
                <el-select
                  v-model="ruleForm.check_common_receiver"
                  style="width:100%"
                  placeholder="校验收件人"
                >
                  <el-option
                    label="校验"
                    :value="1"
                  />
                  <el-option
                    label="不校验"
                    :value="2"
                  />
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col v-if="ruleForm.flight_id" :span="12">
              <el-form-item label="发出地:" prop="start_country">
                <span>{{ flightDetial.start_country }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="ruleForm.flight_id" :span="12">
              <el-form-item label="口岸:" prop="start_country">
                <span>{{ flightDetial.port_sheet.port_name }}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="ruleForm.flight_id" :span="12">
              <el-form-item label="运输方式:" prop="start_country">
                <span v-if="flightDetial.trans_type == 1">海运</span>
                <span v-if="flightDetial.trans_type == 2">空运</span>
              </el-form-item>
            </el-col>
            <el-col v-if="ruleForm.flight_id" :span="12">
              <el-form-item label="业务类型:" prop="start_country">
                <span>一般贸易</span>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="24">
              <el-form-item label="快递公司:" prop="company">
                <el-select
                  v-model="ruleForm.company"
                  style="width:100%"
                  placeholder="请选择快递公司"
                >
                  <el-option
                    v-for="(item,index) in listCourier"
                    :key="index"
                    :label="item.company_name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col> -->

            <!-- <el-col :span="12">
              <el-form-item label="上限单量(票数):" prop="limit_num">
                <el-input v-model="ruleForm.limit_num" placeholder="请输入上限单量" />
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="24">
              <el-form-item label="实际单量(票数):" prop="scan_num">
                <el-input v-model="ruleForm.scan_num" disabled placeholder="请输入实际单量" />
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="上限重量(kg):" prop="limit_weight">
                <el-input v-model="ruleForm.limit_weight" placeholder="请输入上限重量" />
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="24">
              <el-form-item label="实际重量(kg):" prop="scan_weight">
                <el-input v-model="ruleForm.scan_weight" disabled placeholder="请输入实际重量" />
              </el-form-item>
            </el-col> -->
            <el-col :span="24">
              <el-form-item label="使用日期:" prop="use_date">
                <el-date-picker
                  v-model="ruleForm.use_date"
                  style="width: 100%;"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择使用日期"
                  @change="changeUse()"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="发船日期:" prop="ship_start">
                <el-date-picker
                  v-model="ruleForm.ship_start"
                  style="width: 100%;"
                  type="datetime"
                  disabled
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择发船日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="到港日期:" prop="ship_end">
                <el-date-picker
                  v-model="ruleForm.ship_end"
                  style="width: 100%;"
                  type="datetime"
                  disabled
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择到港日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注:" prop="remark">
                <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入备注" />
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>
      <div class="buttons">
        <el-button
          v-if="status == 1"
          size="mini"
          type="primary"
          style="margin-left:20px"
          @click="addNews()"
        >
          新 增
        </el-button>
        <el-button
          v-if="status == 2"
          size="mini"
          type="primary"
          style="margin-left:20px"
          @click="editNews()"
        >
          保 存
        </el-button>
        <el-button
          size="mini"
          type=""
          @click="close()"
        >
          取消
        </el-button>

      </div>

    </el-drawer>
  </div>
</template>

<script>
import { listFlight, createCustomsAffairs, updateCustomsAffairs } from '@/api/lading/index'

export default {
  name: 'Detial',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detial: {
      require: false,
      type: Object,
      default: () => {

      }
    },
    countryCodeList: {
      require: false,
      type: Array,
      default: () => {

      }
    },
    portList: {
      require: false,
      type: Array,
      default: () => {

      }
    },
    listCourier: {
      require: false,
      type: Array,
      default: () => {

      }
    },
    status: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      time: '',
      showDialog: false,
      flightList: [],
      flightDetial: { port_sheet: {}},
      ruleForm: {
        'code': '',
        // 'check_common_receiver': '',
        // 'start_country': '',
        // 'port': '',
        // 'order_type': '',
        // 'company': '',
        // 'trans_type': '',
        'flight_id': '',
        // 'limit_num': '',
        // 'scan_num': '',
        // 'limit_weight': '',
        // 'scan_weight': '',
        'use_date': '',
        'ship_start': '',
        'ship_end': '',
        'remark': ''
      },
      rules: {
        code: [
          { required: true, message: '请输入真实提单号', trigger: 'blur' }
        ],
        // start_country: [
        //   { required: true, message: '请选择发出地' }
        // ],
        // check_common_receiver: [
        //   { required: true, message: '请选择是否校验收件人' }
        // ],
        // port: [
        //   { required: true, message: '请选择走件口岸' }
        // ],
        // order_type: [
        //   { required: true, message: '请选择业务类型' }
        // ],
        // company: [
        //   { required: true, message: '请选择快递公司' }
        // ],
        // trans_type: [
        //   { required: true, message: '请选择运输方式' }
        // ],
        flight_id: [
          { required: true, message: '请选择航班号' }
        ],
        // limit_num: [
        //   { required: true, message: '请输入上限单量' }
        // ],
        // limit_weight: [
        //   { required: true, message: '请输入上限重量' }
        // ],
        use_date: [
          { required: true, message: '请选择使用日期' }
        ],
        ship_start: [
          { required: true, message: '请选择发船日期' }
        ],
        ship_end: [
          { required: true, message: '请选择到港日期' }
        ]
      }
    }
  },
  watch: {
    visible(val) {
      this.showDialog = this.visible
      if (!this.showDialog) {
        this.resetForm()
      } else {
        if (this.status === 2) {
          this.detial.flight_id = this.changeZero(this.detial.flight_id)
          Object.keys(this.ruleForm).forEach(i => {
            this.ruleForm[i] = this.detial[i]
          })
          this.chengFlight()
          this.ruleForm.id = this.detial.id
          if (this.detial.service_time_start === 5) {
            this.time = '1'
          } else {
            this.time = '2'
          }
        }
      }
    }
  },
  mounted() {
    this.getFlight()
  },
  methods: {
    resetDate() {
      this.showDate = false
    },
    chengFlight() {
      this.flightList.forEach(item => {
        if (this.ruleForm.flight_id === item.id) {
          this.flightDetial = item
          if (this.ruleForm.use_date) {
            this.ruleForm.ship_start = this.ruleForm.use_date.split(' ')[0] + ' ' + this.flightDetial.depart_time
            this.ruleForm.ship_end = this.flightDetial.arrive_day > 0 ? this.$moment(this.ruleForm.use_date.split(' ')[0] + ' ' + this.flightDetial.arrive_time).add(this.flightDetial.arrive_day, 'days').format('YYYY-MM-DD HH:mm:ss') : this.ruleForm.use_date.split(' ')[0] + ' ' + this.flightDetial.arrive_time
          }
        }
      })
    },
    changeUse() {
      if (this.ruleForm.use_date) {
        if (this.ruleForm.flight_id) {
          this.ruleForm.ship_start = this.ruleForm.use_date.split(' ')[0] + ' ' + this.flightDetial.depart_time
          this.ruleForm.ship_end = this.flightDetial.arrive_day > 0 ? this.$moment(this.ruleForm.use_date.split(' ')[0] + ' ' + this.flightDetial.arrive_time).add(this.flightDetial.arrive_day, 'days').format('YYYY-MM-DD HH:mm:ss') : this.ruleForm.use_date.split(' ')[0] + ' ' + this.flightDetial.arrive_time
        }
      }
    },
    changeZero(data) {
      if (data === 0) {
        return ''
      } else {
        return data
      }
    },
    chengeTime() {
      if (this.time === '1') {
        this.ruleForm.service_time_start = 5
        this.ruleForm.service_time_end = 7
      } else {
        this.ruleForm.service_time_start = 15
        this.ruleForm.service_time_end = 15
      }
    },
    getFlight() {
      listFlight({
        limit: 1000,
        status: 1
      }).then(res => {
        this.flightList = res.data.data
      })
    },
    close() {
      this.$emit('update', false)
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields()
      this.flightDetial = { port_sheet: {}}
      this.ruleForm = {
        'code': '',
        'flight_id': '',
        'use_date': '',
        'ship_start': '',
        'ship_end': '',
        'remark': ''
      }
    },
    addNews() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          createCustomsAffairs(this.ruleForm).then(res => {
            this.$message.success('添加成功')
            this.$emit('reload')
          })
        } else {
          return false
        }
      })
    },
    editNews() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          updateCustomsAffairs(this.ruleForm).then(res => {
            this.$message.success('编辑成功')
            this.$emit('reload')
          })
        } else {
          return false
        }
      })
    }

  }

}
</script>
<style scoped>
.detial{
  padding:40px 40px 20px 20px;
}
.buttons{
  display: flex;
  flex-direction: row-reverse;
  padding-right: 40px;
}
</style>
